<template>
    <div class="conatainer">
        <h3>{{ handleType == 1 ? '新增收货地址' : '编辑收货地址' }}</h3>
        <div class="form-wrap">
            <div class="form-item">
                <label>收货人<i class="iconfont icon-xinghao"></i></label>
                <div class="form-input">
                    <input type='tel' v-model="form.name" placeholder="收件人姓名" />
                </div>
            </div>
            <div class="form-item">
                <label>手机号<i class="iconfont icon-xinghao"></i></label>
                <div class="form-input">
                    <div class="left">
                        <span>+86</span>
                        <em>|</em>
                    </div>
                    <input type='tel' placeholder="收件人电话" v-model="form.phone" />
                </div>
            </div>
            <div class="form-item">
                <label>所在地区<i class="iconfont icon-xinghao"></i></label>
                <div class="form-input">
                    <el-cascader placeholder="请选择省/市/区" :options="regionData" v-model="form.region_id" @change="handleChange"></el-cascader>
                </div>
            </div>
            <div class="form-item">
                <label>详细地址<i class="iconfont icon-xinghao"></i></label>
                <div class="form-textarea">
                    <textarea placeholder="小区/写字楼/学校" v-model="form.detail"></textarea>
                </div>
            </div>
        </div>
        <el-button class="save-btn" :disabled="isDisabled" :loading="isLoading" @click='submitForm'>保存</el-button>
        <div class="address-wrap" v-loading="loadingPage">
            <el-table :data="list" style="width: 100%" header-cell-class-name='header-cell'>
                <el-table-column prop="name" label="收货人">
                </el-table-column>
                <el-table-column prop="area_name" label="所在地区">
                </el-table-column>
                <el-table-column prop="address_detail" label="详细地址" width="260px">
                </el-table-column>
                <el-table-column prop="phone" label="电话">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" class="handle-btn" @click='editAddress(scope.row.address_id)'>修改</el-button>
                        <em>|</em>
                        <el-button type="text" class="handle-btn" @click='delAddress(scope.row.address_id)'>删除</el-button>
                    </template>
                </el-table-column>
                <el-table-column>
                    <template slot-scope="scope">
                        <el-button type="text" class="handle-btn" v-if="!scope.row.is_default" @click='setDefault(scope.$index)'>设为默认</el-button>
                        <el-button class="default-btn" v-else>默认地址</el-button>
                    </template>
                </el-table-column>
                <div slot="empty" class="empty">
                    <no-data :noDataImg="noDataImg"></no-data>
                </div>
            </el-table>
        </div>
    </div>
</template>

<script>
import NoData from '@/components/NoData.vue'
import {
    addrList,
    getRegionList,
    saveAddress,
    setDefaultAddr,
    detailAddr,
    deleteAddr
} from '../../api/user'
export default {
    components: { NoData },
    props: {
        tabIndex: {
            type: Number,
            default: 0,
        }
    },
    data() {
        return {
            list: [],
            handleType: 1,
            form: {
                name: '',
                phone: '',
                detail: '',
                address_id: '',
                province_id: '',
                city_id: '',
                region_id: ''
            },
            regionData: [],
            isDisabled: false,
            isLoading: false,
            loadingPage: true,
            noDataImg:require('../../assets/img/no-addr.png')
        }
    },
    created() {
        this.getRegionData()
        this.getList();
    },
    methods: {
        getRegionData() {
            const that = this;
            getRegionList().then(res => {
                if (res.code == 0) {
                    let cityArr = [];
                    for (let key in res.data.city) {
                        let cityObj = {
                            value: res.data.city[key].id,
                            label: res.data.city[key].name
                        }
                        cityObj.children = [];
                        for (let k in res.data.city[key].region) {
                            let regionObj = {
                                value: res.data.city[key].region[k].id,
                                label: res.data.city[key].region[k].name
                            }
                            cityObj.children.push(regionObj)
                        }
                        cityArr.push(cityObj);
                    }
                    //组装数据
                    const province = {
                        value: res.data.id,
                        label: res.data.name,
                        children: cityArr
                    }
                    this.regionData.push(province);
                }
            })
        },
        handleChange(e) {
            console.log('e', e);
            this.form.province_id = e[0];
            this.form.city_id = e[1];
            this.form.region_id = e[2];
            console.log('this.form', this.form)
        },
        getList() {
            const that = this;
            addrList().then(res => {
                that.loadingPage = false;
                if (res.code == 0) {
                    res.data.forEach(v => {
                        v.is_default = false;
                        if (res.default_id == v.address_id) {
                            v.is_default = true;
                        }
                    })
                    that.list = res.data;
                }
            })
        },
        editAddress(id) {
            const that = this;
            that.form.address_id = id;
            detailAddr({
                address_id: id
            }).then(res => {
                if (res.code == 0) {
                    that.form.name = res.data.name;
                    that.form.phone = res.data.phone;
                    that.form.detail = res.data.detail;
                    that.form.province_id = res.data.province_id;
                    that.form.city_id = res.data.city_id;
                    that.form.region_id = res.data.region_id;
                }
            })
        },
        delAddress(id) {
            this.$confirm('确认要删除该地址吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteAddr({
                    address_id: id
                }).then(res => {
                    if (res.code == 0) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        that.getList()
                    } 
                })

            }).catch(() => {

            });
            const that = this;
            uni.showModal({
                title: '提示',
                content: `确认要删除该地址吗？`,
                cancelText: '我再想想',
                confirmColor: '#5DC751',
                success(res) {
                    if (res.confirm) {
                        app.globalRequest({
                            api: app.getApi().user.deleteAddr,
                            data: {
                                address_id: id
                            }
                        }).then(res => {

                        })
                    }
                }
            })

        },
        setDefault(index) {
            const that = this;
            const list = this.list;
            console.log('index', index);
            setDefaultAddr({
                address_id: list[index].address_id
            }).then(res => {
                if (res.code == 0) {
                    list.forEach(v => {
                        v.is_default = false;
                    })
                    list[index].is_default = true;
                    that.list = list;
                }
            })
        },
        submitForm() {
            console.log('that.form', this.form)
            const that = this;
            if (!that.form.name) {
                that.$message.error('请输入收货人姓名')
                return;
            }
            if (!that.form.phone) {
                that.$message.error('请输入手机号')
                return;
            }
            if (!(/^1[3456789]\d{9}$/.test(that.form.phone))) {
                that.$message.error('手机号码不合法，请重新输入')
                return;
            }
            if (!that.form.province_id || !that.form.city_id || !that.form.region_id) {
                that.$message.error('请选择省市区')
                return;
            }
            if (!that.form.detail) {
                that.$message.error('请输入详细地址')
                return;
            }
            that.isDisabled = true;
            that.isLoading = true;
            that.btnText = '提交中...';
            saveAddress(that.form).then(res => {
                if (res.code == 0) {
                    that.isDisabled = false;
                    that.isLoading = false;
                    that.$message.success(res.msg)
                    that.form.name = '';
                    that.form.phone = '';
                    that.form.detail = '';
                    that.form.province_id = '';
                    that.form.city_id = '';
                    that.form.region_id = '';
                    that.form.address_id = '';
                    that.getList()
                } else {
                    that.isDisabled = false;
                    that.isLoading = false;
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
$supplier-color: #30b30e;

.conatainer {
    width: 100%;
    padding-bottom: 130px;
}

h3 {
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: #ff4401;
}

.form-wrap {
    width: 563px;
    height: 251px;
    background: #ffffff;
    border-radius: 8px;
    padding: 12px;
    box-sizing: border-box;

    .form-item {
        display: flex;
        align-items: center;
        margin-bottom: 12px;

        label {
            width: 80px;
            font-size: 14px;
            i {
                font-size: 8px;
                position: relative;
                bottom: 2px;
                color: #ff3838;
            }
        }

        .form-input {
            width: 466px;
            height: 42px;
            background: #f9f9f9;
            border-radius: 4px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            box-sizing: border-box;

            em {
                color: #000;
                padding: 0 8px;
            }

            input {
                background: #f9f9f9;
                width: 100%;
                height: 100%;
            }
        }
        ::v-deep .el-cascader {
            width: 100%;
            .el-input__inner {
                border: 0;
                padding: 0;
                background: transparent;
            }
        }

        .form-textarea {
            width: 466px;
            height: 66px;
            background: #f9f9f9;
            border-radius: 4px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            box-sizing: border-box;

            textarea {
                background: #f9f9f9;
                width: 100%;
                height: 66px;
                padding-top: 10px;
                box-sizing: border-box;
            }
        }
    }
}

.set-default {
    margin-top: 16px;
    display: flex;
    align-items: center;

    i {
        font-size: 22px;
        color: #ff4401;
    }

    span {
        line-height: 22px;
        padding-left: 10px;
    }
}

.save-btn {
    width: 72px;
    height: 36px;
    background: #30b30e;
    border-radius: 18px;
    margin-top: 22px;
    color: #fff;
    font-weight: bold;
    border: 0;
    &.is-disabled {
        background-color: rgba(48, 179, 14, 0.5);
        color: rgba(255, 255, 255, 0.5);
    }
}

.flex1 {
    flex: 1;
}

.flex2 {
    flex: 2;
}

.flex3 {
    flex: 3;
}

.address-wrap {
    width: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 20px;
    padding: 12px 12px;
    box-sizing: border-box;
    .handle-btn {
        color: #333;
        &:hover {
            color: var(--main-color);
            text-decoration: underline;
        }
    }
    em {
        padding: 0 8px;
    }
    .default-btn {
        background: rgba(255, 68, 1, 0.12);
        border-radius: 8px;
        border: 0;
        color: #ff4401;
    }
}
</style>